w<template>
  <el-container class="el-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="title">
        <img src="../assets/商城.png" alt="" />
        <span>就爱商城后台管理系统</span>
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar> user </el-avatar>用户名
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus" @click.native="PersonalInfo()"
            >个人信息</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-switch-button" command="logout"
            >退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 首页 -->
          <el-menu-item index="welcome">
            <!-- 图标 -->
            <i class="el-icon-house"></i>
            <!-- 文本 -->
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 客户管理一级菜单 -->
          <el-menu-item index="users">
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628668370955"
                class="icon"
                viewBox="0 0 1035 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="17560"
                width="20"
                height="20"
              >
                <path
                  d="M219.05 881.9c-13.5 0-24.3-10.8-24.3-24.3v-65.7c0-131.85 79.65-248.4 203.4-297.45l13.95-5.4-11.7-9.45C354.05 443.15 327.5 389.15 327.5 331.1c0-103.95 85.5-189 190.35-189s190.35 84.6 190.35 189c0 58.05-26.55 112.05-72.9 148.5l-11.7 9.45 13.95 5.4c123.75 49.05 203.4 166.05 203.4 297.45v65.7c0 13.5-10.8 24.3-24.3 24.3H219.05z m298.35-362.25c-150.75 0-273.6 121.95-273.6 271.8v41.4H791v-41.4c0-149.4-122.85-271.8-273.6-271.8z m0-328.95c-77.85 0-141.3 63-141.3 140.4S439.55 471.5 517.4 471.5c77.85 0 141.3-63 141.3-140.4s-63.45-140.4-141.3-140.4zM86.3 783.35c-13.5 0-24.3-10.8-24.3-24.3v-50.85c0-95.85 52.65-182.25 137.7-225.9l9.9-4.95-7.65-8.55C175.4 440 161 402.65 161 364.4c0-82.35 66.6-151.65 149.4-155.7-13.05 17.55-22.95 36-29.7 55.8C239.3 278.45 210.5 318.95 210.5 363.95c0 41.85 24.75 80.55 63.45 97.65 10.8 4.05 17.1 12.6 17.1 22.5s-7.2 19.35-18 22.95l-5.85 1.35c-92.25 22.95-156.6 105.3-156.6 199.8v26.55h31.05c-2.7 16.2-4.5 32.4-4.95 48.6H86.3z m810.45 0c-0.45-16.2-1.8-32.4-4.95-48.6h31.05v-26.55c0-94.5-64.35-176.4-156.6-199.8l-6.75-1.35c-9.9-3.6-17.1-12.6-17.1-22.5s6.75-18.45 16.65-22.5c38.7-17.55 63.9-55.8 63.9-98.1 0-45-28.8-85.5-71.55-100.8-6.3-19.35-16.2-37.8-28.8-55.35 82.8 4.05 149.4 73.35 149.4 155.7 0 38.7-14.4 75.6-40.95 104.4l-7.65 8.55 9.9 4.95c85.05 43.65 137.7 130.5 137.7 225.9v50.85c0 13.5-10.8 24.3-24.3 24.3l-49.95 0.9z"
                  p-id="17561"
                  fill="#909399"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>客户列表</span>
            </template>
          </el-menu-item>
          <!-- 产品管理 -->
          <el-submenu index="3">
            <!-- 产品管理一级菜单 -->
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628669537350"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="23220"
                width="20"
                height="20"
              >
                <path
                  d="M309.03312857 694.24542529c4.53498322-4.00766006 8.17351667-8.17351667 12.33937326-12.23390863l1.05464712-1.31830912c-16.87435647 16.34703333-17.66534243 17.66534243-13.23582302 13.49948503z"
                  fill="#909399"
                  p-id="23221"
                ></path>
                <path
                  d="M412.01943671 513.26794944l-240.40684973-113.90190684-0.73825324-0.36912662a79.09854675 79.09854675 0 0 0-32.00854531-7.22433417 51.94137937 51.94137937 0 0 0-34.80336091 12.39210518 41.23670911 41.23670911 0 0 0-13.86861163 31.16482827v307.27148786a66.28458225 66.28458225 0 0 0 15.81970935 39.81293535 103.88275791 103.88275791 0 0 0 38.54735816 29.95198299l240.35411782 113.90190764 0.68552051 0.36912662A79.78406726 79.78406726 0 0 0 417.60906704 933.86128989a51.88864663 51.88864663 0 0 0 34.80336091-12.33937327 41.28944183 41.28944183 0 0 0 13.86861163-31.21756018V583.0856005a66.54824423 66.54824423 0 0 0-15.81970935-39.81293536 103.88275791 103.88275791 0 0 0-38.60009088-29.95198299z m508.0236004-109.15599436a51.83591474 51.83591474 0 0 0-34.80336091-12.39210598 79.73133535 79.73133535 0 0 0-32.00854531 7.22433416L612.03329519 513.26794944a103.88275791 103.88275791 0 0 0-38.54735815 29.95198296 66.39004688 66.39004688 0 0 0-15.81970935 39.81293537v307.21875596a41.28944183 41.28944183 0 0 0 13.86861164 31.21756017 51.88864663 51.88864663 0 0 0 34.80336089 12.33937325 79.94226462 79.94226462 0 0 0 32.06127805-7.27706606l240.09045584-114.21830154a103.98822336 103.98822336 0 0 0 38.60009088-29.9519838 66.60097614 66.60097614 0 0 0 15.81970935-39.86566727l0.89644977-307.21875596a41.39490647 41.39490647 0 0 0-13.81587973-31.16482744z m-85.42643033-100.19149256a48.83016989 48.83016989 0 0 0 33.2213898-42.66048285 48.25011319 48.25011319 0 0 0-33.11592517-41.76403308L567.42171545 100.0571405A131.83091125 131.83091125 0 0 0 515.11120947 90.14345621a135.78583859 135.78583859 0 0 0-55.2635181 10.81013489L189.69978793 225.71836555a48.8829018 48.8829018 0 0 0-33.1686579 42.66048284 48.14464856 48.14464856 0 0 0 33.06319327 41.71130035L456.89467927 429.73988409a120.59891784 120.59891784 0 0 0 36.06893728 9.06996644l-1.00191523 0.84371786h17.2434831a135.73310669 135.73310669 0 0 0 55.2635181-10.91559869z"
                  fill="#909399"
                  p-id="23222"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>产品管理</span>
            </template>
            <!-- 二级菜单 -->
            <!-- 类型管理 -->
            <el-menu-item index="category">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628669672024"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="24128"
                  width="20"
                  height="20"
                >
                  <path
                    d="M354.3 448.2h-199c-50.3 0-91.2-41.2-91.2-91.9V155.6c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM155.4 113.8c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V155.6c0-23-18.6-41.8-41.4-41.8h-199zM868.6 448.2h-199c-50.3 0-91.2-41.2-91.2-91.9V155.6c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM669.7 113.8c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V155.6c0-23-18.6-41.8-41.4-41.8h-199zM354.3 958.8h-199c-50.3 0-91.2-41.2-91.2-91.9V666.2c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM155.4 624.4c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V666.2c0-23-18.6-41.8-41.4-41.8h-199zM868.6 958.8h-199c-50.3 0-91.2-41.2-91.2-91.9V666.2c0-50.7 40.9-91.9 91.2-91.9h199c50.3 0 91.2 41.2 91.2 91.9v200.7c0 50.7-40.9 91.9-91.2 91.9zM669.7 624.4c-22.8 0-41.4 18.7-41.4 41.8v200.7c0 23 18.6 41.8 41.4 41.8h199c22.8 0 41.4-18.7 41.4-41.8V666.2c0-23-18.6-41.8-41.4-41.8h-199z"
                    p-id="24129"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>品类管理</span>
              </template>
            </el-menu-item>
            <!-- 商品列表 -->
            <el-menu-item index="goods">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628669905817"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="25961"
                  width="20"
                  height="20"
                >
                  <path
                    d="M368.128 561.664H153.6c-50.176 0-91.136 40.96-91.136 91.136v214.016c0 50.176 40.96 91.136 91.136 91.136h214.016c50.176 0 91.136-40.96 91.136-91.136v-214.016c0.512-50.176-40.448-91.136-90.624-91.136z m40.96 298.496c0 26.624-21.504 48.128-48.128 48.128H160.768c-26.624 0-48.128-21.504-48.128-48.128v-200.704c0-26.624 21.504-48.128 48.128-48.128h200.704c26.624 0 48.128 21.504 48.128 48.128V860.16zM368.128 62.464H153.6c-50.176 0-91.136 40.96-91.136 91.136v214.016c0 50.176 40.96 91.136 91.136 91.136h214.016c50.176 0 91.136-40.96 91.136-91.136V153.6c0.512-50.176-40.448-91.136-90.624-91.136z m40.96 298.496c0 26.624-21.504 48.128-48.128 48.128H160.768c-26.624 0-48.128-21.504-48.128-48.128V160.256c0-26.624 21.504-48.128 48.128-48.128h200.704c26.624 0 48.128 21.504 48.128 48.128v200.704zM600.576 812.032h358.4v40.96h-358.4zM600.576 632.832h358.4v40.96h-358.4zM600.576 167.936h358.4v40.96h-358.4zM600.576 347.136h358.4v40.96h-358.4z"
                    p-id="25962"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>商品列表</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 订单管理 -->
          <el-submenu index="4">
            <!-- 订单管理一级菜单 -->
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628738503450"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6310"
                width="20"
                height="20"
              >
                <path
                  d="M826 472c-17.673 0-32-14.327-32-32V136a8 8 0 0 0-8-8H136a8 8 0 0 0-8 8v752a8 8 0 0 0 8 8h289c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32V96c0-17.673 14.327-32 32-32h730c17.673 0 32 14.327 32 32v344c0 17.673-14.327 32-32 32zM211 270h471c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H211c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m5 206h212c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H216c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m0 206h212c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H216c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m304-206h44c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32h-44c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32z m21.925 217.68a195.738 195.738 0 0 1 23.452-60.926A40.314 40.314 0 0 0 588.5 640c22.368 0 40.5-18.132 40.5-40.5 0-9.94-3.58-19.043-9.522-26.09 22.283-16.159 48.083-27.764 76.034-33.451C698.605 559.256 715.331 574 735.5 574c20.1 0 36.78-14.642 39.955-33.842 27.84 5.81 53.522 17.498 75.69 33.705A40.333 40.333 0 0 0 842 599.5c0 22.368 18.132 40.5 40.5 40.5a40.311 40.311 0 0 0 22.41-6.76 195.73 195.73 0 0 1 23.204 60.63C909.77 697.731 896 714.007 896 733.5c0 19.423 13.673 35.652 31.918 39.589a195.837 195.837 0 0 1-26.6 65.539A40.324 40.324 0 0 0 882.5 834c-22.368 0-40.5 18.132-40.5 40.5a40.32 40.32 0 0 0 5.437 20.283c-21.405 14.904-45.907 25.67-72.348 31.135C771.152 907.673 754.923 894 735.5 894c-19.492 0-35.768 13.77-39.63 32.114-26.515-5.344-51.102-16.011-72.597-30.839A40.312 40.312 0 0 0 629 874.5c0-22.368-18.132-40.5-40.5-40.5a40.318 40.318 0 0 0-19.562 5.029 195.846 195.846 0 0 1-26.816-65.745C560.846 769.718 575 753.262 575 733.5c0-19.831-14.254-36.334-33.075-39.82zM735.5 800c36.727 0 66.5-29.773 66.5-66.5 0-36.727-29.773-66.5-66.5-66.5-36.727 0-66.5 29.773-66.5 66.5 0 36.727 29.773 66.5 66.5 66.5z"
                  p-id="6311"
                  fill="#909399"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>订单管理</span>
            </template>
            <!-- 二级菜单 -->
            <!-- 订单信息 -->
            <el-menu-item index="orderInfo">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628670586509"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="27029"
                  width="20"
                  height="20"
                >
                  <path
                    d="M724.147748 149.011802 298.901601 149.011802c-68.508303 0-124.044154 55.536874-124.044154 124.044154l0 478.458069c0 68.508303 55.536874 124.044154 124.044154 124.044154l425.246147 0c68.508303 0 124.044154-55.536874 124.044154-124.044154l0-478.458069C848.191902 204.548676 792.655028 149.011802 724.147748 149.011802zM813.399491 752.162802c0 48.934502-39.669488 88.602967-88.602967 88.602967L299.276131 840.765769c-48.934502 0-88.602967-39.669488-88.602967-88.602967l0-478.732315c0-48.934502 39.669488-88.602967 88.602967-88.602967l425.520393 0c48.934502 0 88.602967 39.669488 88.602967 88.602967L813.399491 752.162802z"
                    p-id="27030"
                    fill="#909399"
                  ></path>
                  <path
                    d="M565.011354 503.075747l105.874329 0c39.147602 0 70.882374-31.734772 70.882374-70.882374l0-105.874329c0-39.147602-31.734772-70.882374-70.882374-70.882374l-105.874329 0c-39.147602 0-70.882374 31.734772-70.882374 70.882374l0 105.874329C494.127957 471.339952 525.863752 503.075747 565.011354 503.075747zM528.920368 326.69255c0-19.573801 15.867386-35.441187 35.441187-35.441187l106.148575 0c19.573801 0 35.441187 15.867386 35.441187 35.441187l0 106.149599c0 19.573801-15.867386 35.441187-35.441187 35.441187l-106.148575 0c-19.573801 0-35.441187-15.867386-35.441187-35.441187L528.920368 326.69255z"
                    p-id="27031"
                    fill="#909399"
                  ></path>
                  <path
                    d="M301.951053 291.251364l106.324584 0c9.785877 0 17.720593-8.121981 17.720593-17.907858s-7.934716-17.907858-17.720593-17.907858L301.951053 255.435647c-9.785877 0-17.720593 8.121981-17.720593 17.907858S292.165176 291.251364 301.951053 291.251364z"
                    p-id="27032"
                    fill="#909399"
                  ></path>
                  <path
                    d="M301.951053 396.651902l106.324584 0c9.785877 0 17.720593-7.601118 17.720593-17.396205s-7.934716-17.396205-17.720593-17.396205L301.951053 361.859491c-9.785877 0-17.720593 7.601118-17.720593 17.396205S292.165176 396.651902 301.951053 396.651902z"
                    p-id="27033"
                    fill="#909399"
                  ></path>
                  <path
                    d="M301.951053 503.075747l106.324584 0c9.785877 0 17.720593-7.601118 17.720593-17.396205s-7.934716-17.396205-17.720593-17.396205L301.951053 468.283336c-9.785877 0-17.720593 7.601118-17.720593 17.396205S292.165176 503.075747 301.951053 503.075747z"
                    p-id="27034"
                    fill="#909399"
                  ></path>
                  <path
                    d="M727.247342 574.707181l-425.296289 0c-9.785877 0-17.720593 7.601118-17.720593 17.396205s7.934716 17.396205 17.720593 17.396205l425.296289 0c9.785877 0 17.720593-7.601118 17.720593-17.396205S737.033219 574.707181 727.247342 574.707181z"
                    p-id="27035"
                    fill="#909399"
                  ></path>
                  <path
                    d="M567.760978 681.131025 301.951053 681.131025c-9.785877 0-17.720593 7.601118-17.720593 17.396205s7.934716 17.396205 17.720593 17.396205l265.809925 0c9.785877 0 17.720593-7.601118 17.720593-17.396205S577.547879 681.131025 567.760978 681.131025z"
                    p-id="27036"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>订单信息</span>
              </template>
            </el-menu-item>
            <!-- 订单列表 -->
            <el-menu-item index="orderlist">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628738568769"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7244"
                  width="20"
                  height="20"
                >
                  <path
                    d="M810.666667 85.333333a128 128 0 0 1 128 128v597.333334a128 128 0 0 1-128 128H213.333333a128 128 0 0 1-128-128V213.333333a128 128 0 0 1 128-128z m0 42.666667H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v597.333334a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334a85.333333 85.333333 0 0 0 85.333333-85.333333V213.333333a85.333333 85.333333 0 0 0-85.333333-85.333333zM259.370667 653.482667a30.314667 30.314667 0 1 1 0 60.629333 30.314667 30.314667 0 0 1 0-60.629333z m515.370666 3.626666a26.666667 26.666667 0 0 1 2.730667 53.205334l-2.730667 0.149333h-384a26.666667 26.666667 0 0 1-2.730666-53.205333l2.730666-0.128h384z m-515.370666-185.536a30.314667 30.314667 0 1 1 0 60.629334 30.314667 30.314667 0 0 1 0-60.629334z m515.370666 3.648a26.666667 26.666667 0 0 1 2.730667 53.205334l-2.730667 0.128h-384a26.666667 26.666667 0 0 1-2.730666-53.184l2.730666-0.149334h384zM259.370667 289.706667a30.314667 30.314667 0 1 1 0 60.629333 30.314667 30.314667 0 0 1 0-60.629333z m515.370666 3.648a26.666667 26.666667 0 0 1 2.730667 53.205333l-2.730667 0.128h-384a26.666667 26.666667 0 0 1-2.730666-53.205333l2.730666-0.128h384z"
                    fill="#909399"
                    p-id="7245"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>订单列表</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 支付管理一级菜单 -->
          <el-submenu index="5">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628731728146"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2091"
                width="20"
                height="20"
              >
                <path
                  d="M691.2 546.133333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667-21.333333-42.666667-42.666667-42.666667z"
                  p-id="2092"
                  fill="#909399"
                ></path>
                <path
                  d="M857.6 341.333333v494.933334H162.133333L166.4 341.333333h691.2m0-85.333333H166.4c-46.933333 0-85.333333 38.4-85.333333 85.333333v490.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h695.466667c46.933333 0 85.333333-38.4 85.333333-85.333333V341.333333c0-46.933333-38.4-85.333333-89.6-85.333333z"
                  p-id="2093"
                  fill="#909399"
                ></path>
                <path
                  d="M853.333333 328.533333c-17.066667 0-34.133333-12.8-38.4-29.866666l-42.666666-119.466667c-8.533333-21.333333-29.866667-34.133333-46.933334-29.866667L243.2 324.266667c-21.333333 8.533333-42.666667-4.266667-51.2-25.6-8.533333-21.333333 0-46.933333 25.6-55.466667l477.866667-174.933333c59.733333-21.333333 132.266667 12.8 153.6 81.066666l42.666666 119.466667c8.533333 21.333333-4.266667 46.933333-25.6 55.466667 0 0-4.266667 4.266667-12.8 4.266666zM861.866667 503.466667v170.666666h-170.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333h170.666667m55.466666-85.333334h-226.133333c-93.866667 0-170.666667 76.8-170.666667 170.666667s76.8 170.666667 170.666667 170.666667h226.133333c17.066667 0 29.866667-12.8 29.866667-29.866667v-281.6c0-17.066667-12.8-29.866667-29.866667-29.866667z"
                  p-id="2094"
                  fill="#909399"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>支付管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="payment">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628731869492"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2404"
                  width="20"
                  height="20"
                >
                  <path
                    d="M149.211429 352.109714l97.499428-229.814857a70.217143 70.217143 0 0 1 92.086857-37.229714c12.434286 5.266286 26.697143 10.971429 43.739429 17.554286 8.923429 3.510857 17.993143 6.948571 29.915428 11.483428 30.208 11.483429 42.057143 15.945143 49.371429 18.870857l55.149714-55.296a77.677714 77.677714 0 0 1 109.787429 0.585143l209.773714 209.700572c17.554286 17.554286 25.088 41.398857 22.528 64.146285h64.073143c25.234286 0 45.641143 20.48 45.641143 45.714286v525.312c0 25.234286-20.48 45.641143-45.641143 45.641143H100.864a45.714286 45.714286 0 0 1-45.641143-45.641143V397.824c0-25.234286 20.48-45.714286 45.641143-45.714286h48.274286z m52.370285 0h41.837715L424.594286 170.422857l-29.257143-11.117714-30.208-11.556572c-15.213714-5.851429-30.208-11.922286-45.202286-18.212571a21.942857 21.942857 0 0 0-28.818286 11.702857L201.581714 352.109714z m116.516572 0h487.131428a25.161143 25.161143 0 0 0-5.705143-27.062857L589.750857 115.273143a25.014857 25.014857 0 0 0-35.328-0.219429L318.098286 352.109714z m-217.234286 45.714286v525.312h822.272V397.824H100.864z m639.561143 342.601143a91.355429 91.355429 0 1 1 0-182.710857 91.355429 91.355429 0 0 1 0 182.710857z m0-45.714286a45.714286 45.714286 0 1 0 0-91.355428 45.714286 45.714286 0 0 0 0 91.355428z"
                    p-id="2405"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>支付方式管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 供应商管理一级菜单 -->
          <el-submenu index="6">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <svg
                t="1628668634023"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="19323"
                width="20"
                height="20"
              >
                <path
                  d="M399.92 314.06c0 0.8 0 1.6 0.08 2.38v-4.76c0 0.79-0.08 1.58-0.08 2.38zM480 314.06v-0.93V314.06z"
                  fill="#909399"
                  p-id="19324"
                ></path>
                <path
                  d="M802.41 607.28l-1.75-1.6c0.57 0.55 1.15 1.09 1.75 1.6zM853.56 545.68q1.91 1.71 3.78 3.45a39.85 39.85 0 0 0-3.78-3.45z"
                  fill="#909399"
                  p-id="19325"
                ></path>
                <path
                  d="M544 64c-132.55 0-240 107.45-240 240s107.45 240 240 240 240-107.45 240-240S676.55 64 544 64z m0 400a160 160 0 1 1 160-160 160 160 0 0 1-160 160z"
                  fill="#909399"
                  p-id="19326"
                ></path>
                <path
                  d="M767.08 523.76c-1.26-0.73-2.54-1.45-3.82-2.17A445.89 445.89 0 0 0 544 464.34c-247.42 0-448 200.58-448 448v7.58c0 1.06 0 2.1 0.13 3.13a40 40 0 0 0 80-2.85v-0.28c0-0.71 0-1.41-0.06-2.11v-5.48c0-203.24 164.76-368 368-368a366.28 366.28 0 0 1 180.42 47.2l2.41 1.38a40 40 0 0 0 40.25-69.16zM893.74 709.49H777.37a34.26 34.26 0 0 0-34.26 34.26v2.59a34.26 34.26 0 0 0 34.26 34.26h29.24L713 874.17 607.44 768.56a35.53 35.53 0 0 0-50.28 0L426.41 899.29a35.57 35.57 0 0 0 0 50.29 35.57 35.57 0 0 0 50.29 0L582.29 844l105.6 105.6a35.55 35.55 0 0 0 50.29 0l118.71-118.72v29.24a34.26 34.26 0 0 0 34.26 34.26h2.59A34.26 34.26 0 0 0 928 860.12V743.75a34.26 34.26 0 0 0-34.26-34.26z"
                  fill="#909399"
                  p-id="19327"
                ></path>
              </svg>
              <!-- 文本 -->
              <span>供应商管理</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item index="posts">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628668902308"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="19922"
                  width="20"
                  height="20"
                >
                  <path
                    d="M62.1 499.5V819c0 4.5 1.1 8.8 3 12.6V486.9c-2 3.8-3 8.1-3 12.6z m536.7 181.6c-3.3-3.4-6.7-6.6-10.2-9.5 2.6 3.9 6.1 7.2 10.2 9.5zM432.8 324c62.6 0 113.6-51 113.6-113.6 0-62.6-51-113.6-113.6-113.6-62.6 0-113.6 51-113.6 113.6 0 62.6 50.9 113.6 113.6 113.6z m0-175.5c34.1 0 61.8 27.7 61.8 61.8 0 34.1-27.7 61.8-61.8 61.8-34.1 0-61.8-27.7-61.8-61.8-0.1-34 27.7-61.8 61.8-61.8z m279.5 375.1c62.6 0 113.6-51 113.6-113.6 0-62.6-51-113.6-113.6-113.6-62.6 0-113.6 51-113.6 113.6 0 62.7 51 113.6 113.6 113.6z m0-175.4c34.1 0 61.8 27.7 61.8 61.8 0 34.1-27.7 61.8-61.8 61.8-34.1 0-61.8-27.7-61.8-61.8 0-34.1 27.7-61.8 61.8-61.8z"
                    p-id="19923"
                    fill="#909399"
                  ></path>
                  <path
                    d="M959.4 729.3c-8.8-35-46.6-101.3-127.3-101.3H624.7c-29.1-24.6-59.2-36.9-61.6-37.9-3.4-1.3-6.9-2-10.5-2H426.2c-62-70.5-163.1-78.8-187.8-79.7v-8.7c0-15.6-12.7-28.3-28.3-28.3H90.4c-11.1 0-20.7 6.4-25.3 15.7v344.6c4.6 9.3 14.3 15.7 25.3 15.7h119.8c8.1 0 15.4-3.4 20.6-8.9 45.5 25.1 128.4 69.5 173.1 84.3 2.9 1 5.9 1.4 8.9 1.4h99.8c3.4 0 6.8-0.6 10.1-1.9L942 762.6c10.7-4.1 17.6-14 18.2-24.9v-3.2c-0.1-1.8-0.4-3.5-0.8-5.2z m-777.5 61.4h-63.2V527.8h63.2v262.9z m325.5 76.8h-89.9c-48.7-17.4-145.9-71.1-179.1-89.7V565c22.3 1.3 107.9 9.9 151.7 68.3 5.3 7.1 13.8 11.3 22.6 11.3h133.7c8.2 3.9 25.8 13 42.1 26.9 3.5 3 6.9 6.1 10.2 9.5 7.6 7.8 14.3 16.7 18.9 26.8H372.9c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3h279.5c15.6 0 28.3-12.7 28.3-28.3 0-19.1-4.3-36.3-11.3-51.6h162.7c32.8 0 51.8 18.7 62.2 35.6L507.4 867.5z"
                    p-id="19924"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>店家列表</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 系统管理一级菜单 -->
          <el-submenu index="7">
            <!-- 一级菜单模板区 -->
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-setting"></i>
              <!-- 文本 -->
              <span>系统管理</span>
            </template>
            <!-- 二级菜单 -->
            <!-- 角色列表管理 -->
            <el-menu-item index="qrcode">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628732018304"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3587"
                  width="20"
                  height="20"
                >
                  <path
                    d="M467 521.3c90.6 0 164.1-73.5 164.1-164.1S557.6 193.1 467 193.1s-164.1 73.5-164.1 164.1c-0.1 90.6 73.4 164.1 164.1 164.1z m-83.8-247.8c39.9-40 102.6-46.1 149.5-14.7 47 31.4 65.2 91.6 43.6 143.8-21.6 52.2-77.1 81.9-132.5 70.8-55.4-11-95.3-59.7-95.3-116.2 0-31.4 12.4-61.6 34.7-83.7z m209 275.3H341.7c-75.9 0-137.9 62-137.9 137.9 0 75.8 62.1 137.9 137.9 137.9h250.6c75.9 0 137.9-62.1 137.9-137.9 0-75.8-62.1-137.9-138-137.9z m65.1 203.1c-17.2 17.4-40.6 27.1-65.1 27.1H341.7c-50.9 0-92.2-41.3-92.2-92.2 0-50.9 41.3-92.2 92.2-92.2h250.6c37.3-0.1 71 22.4 85.2 56.9 14.2 34.4 6.3 74-20.2 100.4z m0 0M685 345h113.5c15.2 0 22.8 7.6 22.8 22.8 0 15.2-7.6 22.9-22.8 22.9H685c-15.2 0-22.8-7.6-22.8-22.9-0.1-15.2 7.5-22.8 22.8-22.8z m0 0M685 415.3h113.5c15.2 0 22.8 7.6 22.8 22.9 0 15.2-7.6 22.9-22.8 22.9H685c-15.2 0-22.8-7.6-22.8-22.9-0.1-15.3 7.5-22.9 22.8-22.9z m0 0M685 475.6h113.5c15.2 0 22.8 7.6 22.8 22.9 0 15.2-7.6 22.9-22.8 22.9H685c-15.2 0-22.8-7.6-22.8-22.9-0.1-15.3 7.5-22.9 22.8-22.9z m0 0"
                    p-id="3588"
                    fill="#909399"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>角色列表</span>
              </template>
            </el-menu-item>
            <!-- 轮播图管理 -->
            <el-menu-item index="qrcode">
              <template slot="title">
                <!-- 图标 -->
                <svg
                  t="1628732288485"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4593"
                  width="20"
                  height="20"
                >
                  <path
                    d="M831.146667 312.32L290.133333 223.573333c-37.546667-6.826667-71.68 18.773333-78.506666 56.32l-6.826667 40.96c-37.546667 0-68.266667 30.72-68.266667 68.266667V733.866667c0 37.546667 30.72 68.266667 68.266667 68.266666h546.133333c23.893333 0 44.373333-11.946667 56.32-30.72 10.24-10.24 18.773333-23.893333 22.186667-39.253333l56.32-341.333333c6.826667-37.546667-18.773333-73.386667-54.613333-78.506667z m-587.093334-10.24c5.12-27.306667 30.72-46.08 58.026667-42.666667l365.226667 59.733334h-426.666667l3.413333-17.066667zM785.066667 716.8c0 29.013333-22.186667 51.2-51.2 51.2H221.866667c-29.013333 0-51.2-22.186667-51.2-51.2V404.48c0-27.306667 22.186667-51.2 51.2-51.2h512c29.013333 0 51.2 23.893333 51.2 51.2V716.8z m64.853333-315.733333L819.2 585.386667V387.413333c0-17.066667-6.826667-34.133333-18.773333-46.08l6.826666 1.706667c29.013333 5.12 47.786667 30.72 42.666667 58.026667z"
                    fill="#909399"
                    p-id="4594"
                  ></path>
                  <path
                    d="M363.52 479.573333m-56.32 0a56.32 56.32 0 1 0 112.64 0 56.32 56.32 0 1 0-112.64 0Z"
                    fill="#909399"
                    p-id="4595"
                  ></path>
                  <path
                    d="M546.133333 525.653333c-8.533333-10.24-23.893333-10.24-32.426666 0L419.84 631.466667c-6.826667 6.826667-18.773333 6.826667-23.893333 0L375.466667 609.28c-8.533333-10.24-23.893333-10.24-32.426667 0l-56.32 64.853333c-10.24 10.24-1.706667 27.306667 11.946667 27.306667h365.226666c15.36 0 22.186667-17.066667 11.946667-27.306667L546.133333 525.653333z"
                    fill="#909399"
                    p-id="4596"
                  ></path>
                </svg>
                <!-- 文本 -->
                <span>轮播图管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 个人信息对话框区域 -->
    <el-dialog
      title="个人信息"
      :visible.sync="InfoVisible"
      width="100%"
      @close="editDialogclosed"
    >
      <!-- 内容主体区域 -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card>
            <el-form :model="editForm" ref="editFormRef" label-width="70px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div>
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </el-col>
                <el-col :span="12">
                  <!-- 用户名 -->
                  <el-form-item label="账号" prop="username">
                    <el-input v-model="editForm.username" disabled></el-input>
                  </el-form-item>
                  <!-- 昵称 -->
                  <el-form-item label="昵称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                  </el-form-item>
                  <!-- 密码 -->
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="editForm.password"></el-input>
                  </el-form-item>
                  <!-- 年龄 -->
                  <el-form-item label="年龄" prop="age">
                    <el-input v-model="editForm.age"></el-input>
                  </el-form-item>
                  <!-- 性别 -->
                  <el-form-item label="性别" prop="sex">
                    <el-input v-model="editForm.sex"></el-input>
                  </el-form-item>
                  <!-- 手机 -->
                  <el-form-item label="手机" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                  </el-form-item>
                  <!-- 邮箱 -->
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <el-row :gutter="24">
              <el-col :span="3">
                <el-avatar> user </el-avatar>
              </el-col>
              <el-col :span="21">
                <el-descriptions title="">
                  <el-descriptions-item label="账号">
                    <el-tag size="small">admin</el-tag></el-descriptions-item
                  >
                  <el-descriptions-item label="密码"
                    >123456</el-descriptions-item
                  >
                  <el-descriptions-item label="昵称"
                    >刘大牛</el-descriptions-item
                  >
                  <el-descriptions-item label="角色">
                    <el-tag size="small">管理员</el-tag>
                  </el-descriptions-item>

                  <el-descriptions-item label="性别">男</el-descriptions-item>
                  <el-descriptions-item label="手机号"
                    >15555466741</el-descriptions-item
                  >
                  <el-descriptions-item label="邮箱"
                    >qq@.com</el-descriptions-item
                  >
                  <el-descriptions-item label="年龄">34</el-descriptions-item>
                  <el-descriptions-item label="联系地址"
                    >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                  >
                </el-descriptions>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <!-- 底部按钮区域 -->
        <el-button @click="InfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="PutPassWord()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import '../assets/css/global.css'
export default {
  mounted () {
  },
  data () {
    return {
      // 获取到的用户信息
      editForm: {
        id: 2,
        username: 'admin',
        name: '刘大牛',
        password: '123456',
        age: '34',
        sex: '男',
        phone: 15555466741,
        email: 'qq@.com'
      },
      // 是否折叠
      isCollapse: false,
      adminName: '',
      adminId: 0,
      // 控制修改密码对话框的隐藏和显示，默认为false
      InfoVisible: false,
      // 修改密码表单数据绑定
      ChangeForm: {
        adminpwd: ''
      },
      ChangeFormRules: {
        adminname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        adminpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      imageUrl: ''
    }
  },
  created () {

  },
  methods: {
    // 点击下拉菜单触发的事件
    handleCommand (command) {
      if (command === 'logout') {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    },
    // 点击折叠，切换菜单的折叠和展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 修改密码
    PersonalInfo () {
      this.InfoVisible = true
    },
    // 修改密码
    async PutPassWord () {
      this.InfoVisible = false
      console.log(this.ChangeForm.adminpwd)
      await this.$http.put(`admin/${this.adminId}`, this.ChangeForm)
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 监听修改密码对话框关闭事件
    editDialogclosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 头像上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
}
.title {
  display: flex;
  align-items: center;
  color: rgb(31, 29, 29);
}
.el-avatar {
  overflow: inherit;
  margin-right: 5px;
}
span {
  margin-left: 15px;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: none;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.avatar-uploader-icon[data-v-fae5bece] {
  background-color: #c0c4cc;
  color: #fff;
  border-radius: 90px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* .towcard{
  float: right;
} */
</style>
